<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/jsp/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>security system</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet"
	href="<c:url value="/css/bootstrap.min.css"></c:url>">
<link rel="stylesheet"
	href="<c:url value="/css/bootstrap-datetimepicker.min.css"></c:url>">
</head>
<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header" style="margin:10px;">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">UUC Bioengineering Ltd.</a>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1" style="margin:10px;">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Personal Infomation</a>
				</li>
				<li><a
					href="<s:url namespace="/user" action="gotoMyQR"></s:url>">My
						QRcode</a>
				</li>
				<li><a
					href="<s:url namespace="/user" action="gotoMyAccessAction"/>">My
						Access</a>
				</li>
				<li><a
					href="<s:url namespace="/user" action="loadMyLogAction"/>">My
						Log</a>
				</li>
				<li><a
					href="<s:url namespace="/user" action="gotoFireAlarmAction"/>">Fire
						Alarm</a>
				</li>
				<li><a
					href="<s:url namespace="/user" action="gotoErrorReportAction"/>">Error
						Report</a>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right" style="margin-right:20px;">
				<li><a href="#">${loginedUser.user_ID}</a>
				</li>
				<li><a href="#">${loginedUser.user_Name}</a>
				</li>
				<li><a href="#">${loginedUser.title}</a>
				</li>
				<li><a
					href='<s:url namespace="/system" action="userLogout"></s:url>'>Log
						out</a>
				</li>
			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</nav>
	<div class="container">
		<div class="row">
			<label style="font-size:24px;margin:30px;">My Information</label>
		</div>
		<div class="row">
			<div class="col-lg-10 col-lg-offset-1">
				<s:form cssClass="form-horizontal" role="form" action="update"
					namespace="/user" method="post"
					onSubmit="return Validator.Validate(this,3)">
					<s:hidden name="user.user_ID"></s:hidden>
					<div class="row">
						<div class="col-lg-6">
							<div class="form-group" style="margin-bottom:30px;">
								<label for="inputusername" class="col-lg-3 control-label">UserName</label>
								<div class="col-lg-8 ">
									<s:textfield name="user.user_Name" cssClass="form-control"
										id="inputusername" readonly="true"></s:textfield>
								</div>
							</div>
							<div class="form-group" style="margin-bottom:30px;">
								<label class="col-lg-3 control-label">Title</label>
								<div class="col-lg-8">
									<s:textfield name="user.title" cssClass="form-control"
										id="inputtitle" readonly="true"></s:textfield>
								</div>
							</div>
							<div class="form-group" style="margin-bottom:30px;">
								<label class="col-lg-3 control-label">Gender</label>
								<div class="col-lg-8">
									<s:select cssClass="form-control input-lg"
										name="user.user_Gender"
										list="#{'Male':'Male','Female':'Female'}">
									</s:select>
								</div>
							</div>
							<div class="form-group" style="margin-bottom:30px;">
								<label for="TelInput" class="col-lg-3 control-label">Telephone</label>
								<div class="col-lg-8">
									<s:textfield name="user.user_Tel" cssClass="form-control"
										id="TelInput" dataType="Require" msg="Please enter your telephone number."></s:textfield>
								</div>
							</div>
							<div class="form-group" style="margin-bottom:30px;">
								<label for="BirthInput" class="col-lg-3 control-label">Birthday</label>
								<div class="input-group date form_date col-md-5" data-date=""
									data-date-format="dd MM yyyy" data-link-field="dtp_input2"
									data-link-format="yyyy-mm-dd">
									<s:textfield name="user.birth" cssClass="form-control"
										id="BirthInput" dataType="Require" msg="Please enter your birthday."></s:textfield>
									<span class="input-group-addon"><span
										class="glyphicon glyphicon-remove"></span> </span> <span
										class="input-group-addon"><span
										class="glyphicon glyphicon-calendar"></span> </span>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="form-group" style="margin-bottom:30px;">
								<label for="EmailInput" class="col-lg-3 control-label">Email</label>
								<div class="col-lg-8">
									<s:textfield name="user.user_Email" cssClass="form-control"
										id="EmailInput" dataType="Email" msg="Invalid email address."></s:textfield>
								</div>
							</div>
							<div class="form-group" style="margin-bottom:30px;">
								<label for="ExpiryInput" class="col-lg-3 control-label">Expiredate</label>
								<div class="col-lg-8">
									<s:textfield name="user.expire_Date" cssClass="form-control"
										id="ExpireInput" readonly="true"></s:textfield>
								</div>
							</div>
							<div class="form-group" style="margin-bottom:30px;">
								<div class="col-lg-offset-6 col-lg-1">
									<button type="submit" class="btn btn-primary">submit</button>
								</div>
							</div>
						</div>
					</div>
				</s:form>
			</div>
		</div>
	</div>
	<script src="<c:url value="/js/jquery-1.9.1.min.js"></c:url>"></script>
	<script src="<c:url value="/js/bootstrap.min.js"></c:url>"></script>
	<script
		src="<c:url value="/js/bootstrap-datetimepicker.min.js"></c:url>"></script>
	<script type="text/javascript"
		src="<s:url value="/js/Validator.js"></s:url>"></script>
	<script type="text/javascript">
		$('.form_datetime').datetimepicker({
			//language:  'fr',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			showMeridian : 1
		});
		$('.form_date').datetimepicker({
			language : 'fr',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			minView : 2,
			forceParse : 0
		});
		$('.form_time').datetimepicker({
			language : 'fr',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 1,
			minView : 0,
			maxView : 1,
			forceParse : 0
		});
	</script>
</body>
</html>
